<!--
 * @description  : 证件-送达人选择组件
 * @descriptionDetail: 证件-送达人选择组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-11 13:29:13
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <view class="nav-right-icon">
        <text class="" @click="save">
          确定
        </text>
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view class="content u-page">
      <view class="searchbar">
        <u-search placeholder="请输入送达人姓名" v-model="personName" @custom="toSearch" @clear="clear">
        </u-search>
      </view>
      <view class="per-list">
        <me-table :top="100" :i="0" :index="0" :load-data="loadData" :init-load="true" ref="mescrollItem0">
          <template #default="d">
            <view class="p_content">
              <view class="real-content" @click="choice(d.data, d.index)">
                <u-row gutter="16" class="row-t">
                  <u-col span="4">
                    <view class="text-title">
                      {{ d.data.personName }}
                    </view>
                  </u-col>
                  <u-col span="8" class="row-t">
                    <view class="text-title">
                      执法证号：{{ d.data.leCertNo }}
                    </view>
                  </u-col>
                </u-row>
                <u-row gutter="16" class="row-t">
                  <u-col span="7">
                    <view class="text-sub">
                      手机号：
                      {{ d.data.mobile }}
                    </view>
                  </u-col>
                  <u-col span="5">
                    <view class="text-sub">
                      所属部门：
                      {{ d.data.departName }}
                    </view>
                  </u-col>
                </u-row>
                <u-row gutter="16" class="row-t">
                  <u-col span="12">
                    <view class="text-sub">
                      所属单位：
                      {{ d.data.orgName }}
                    </view>
                  </u-col>
                </u-row>
              </view>
              <u-icon
                style="margin-right: 10rpx;"
                name="checkbox-mark"
                color="#2979ff"
                size="38"
                v-show="d.data.checked"
              ></u-icon>
            </view>
          </template>
        </me-table>
      </view>
    </view>
  </view>
</template>

<script>
	import meTable from '@/components/me-table.vue'
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import certificateService from "@/service/certificate/certificate.service.js";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			meTable,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				personName: '',
				selectIds: [],
				selectItems: [],
				isSingle: true,
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			}
		},
		onLoad(opt) {
			this.isSingle = opt.isSingle;
		},
		mounted() {
			this.setRightBtns();
		},
		methods: {
			setRightBtns() {
				let self = this;
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("确定", () => {
					self.save();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.save();
				}
			},
			// 调用后台接口查询数据
			loadData(page) {
				let self = this;
				let parmas = {
					page: page.num,
					limit: page.size,
					roles: "licReceivePerson",
					scope: 1,
					personName: this.personName,
				}
				return new Promise((resolve, reject) => {
					certificateService
						.getRoleUsers(parmas)
						.then((res) => {
							this.$modal.hideLoading();
							if (res.success) {
								res.data.forEach(itm => {
									itm.checked = this.selectIds.includes(itm.personUuid);
								});
								resolve({
									count: res.count,
									data: res.data,
								});
							} else {
								this.$modal.alert("查询失败:" + res.msg);
								resolve({
									data: [],
								});
							}
						})
				});
			},
			// 添加检测信息
			save() {
				if (this.selectItems.length == 0) {
					this.$api.toast('请选择送达人');
					return;
				}
				this.backPrev({
					paramKey: "backPersonUuid",
					param: this.selectItems,
				});
			},
			toSearch() {
				this.getMescroll(this.tabIndex).triggerDownScroll();
			},
			clear() {
				this.personName = '';
				this.getMescroll(this.tabIndex).triggerDownScroll();
			},
			choice(item, index) {
				if (this.isSingle) {
					if (this.selectIds == item.personUuid) {
						this.selectIds = '';
						this.selectItems = [];
					} else {
						this.selectIds = [item.personUuid, ];
						this.selectItems = [item, ];
					}

					this.$refs.mescrollItem0.listDatas.forEach(itm => {
						itm.checked = this.selectIds.includes(itm.personUuid);
					});
				} else {
					let len = -1;
					for (let i = 0; i < this.selectIds.length; i++) {
						if (this.selectIds[i] == item.personUuid) {
							len = i;
							break;
						}
					}
					if (len == -1) {
						this.selectIds.push(item.personUuid);
						this.selectItems.push(item);
					} else {
						this.selectIds.splice(len, 1);
						this.selectItems.splice(len, 1);
					}
					this.$refs.mescrollItem0.listDatas.forEach(itm => {
						itm.checked = this.selectIds.includes(itm.personUuid);
					});
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.p_content {
		width: 100%;
		padding: 20rpx 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid $u-border-color;
	}

	.real-content {}

	.text-title {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.text-sub {
		font-size: 24rpx;
		color: #B2B2B2;
	}

	.searchbar {
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 44px;
		/* #endif */
		width: 100%;
		padding: 30rpx;
		z-index: 999;
		background-color: white;
	}

	.nav-right-icon {
		margin-right: 20rpx;
		color: white;
	}

	.row-t {
		margin: 5rpx 0rpx;
	}
</style>
